<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人空间</title>
    <link rel="stylesheet" th:href="@{/static/layui/js/css/layui.css}">
    <script th:src="@{/static/layui/js/layui.js}" charset="UTF-8" type="text/javascript"></script>
    <script th:src="@{/static/vue/vue.js}" charset="UTF-8" type="text/javascript"></script>
    <script th:src="@{/static/vue/axios.min.js}" charset="UTF-8" type="text/javascript"></script>
    <script th:src="@{/static/jquery/jquery.js}" charset="UTF-8" type="text/javascript"></script>
    <style>
        .layui-bold{
            font-weight: bold;
        }
    </style>
</head>
<body>
<!--导航-->
        <ul class="layui-nav layui-bg-green"  lay-bar="disabled">
            <li class="layui-nav-item layui-nav-itemed" lay-unselect>
                <a class="layui-font-20" style="color: white;vertical-align: middle">个人空间</a>
            </li>

            <li class="layui-nav-item" >
                <ul class="layui-nav layui-bg-green">

                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="layui-font-18" th:href="@{/community/personal/space}">首页</a>
                    </li>

                    <li class="layui-nav-item ">
                        <a class="layui-font-18" th:href="@{/community/personal/space/message}">留言</a>
                    </li>


                </ul>

            </li>



            <!--个人信息导航-->
            <li class="layui-nav-item layui-layout-right"  style="margin-right: 50px">
                <a href="javascript:;">
                    <!--个人头像,由后端动态显示-->
                    <a href="javascript:;">
                        <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img userPortrait" id="userPortrait">
                        我

                        <!--头像显示-->
                        <script th:inline="javascript" >
                            let bufferedPortrait = [[${stp.getSession().getString('userPortraitCode')}]]
                            if(bufferedPortrait !== ''){
                                $('#userPortrait').attr('src',"data:image/png;base64,"+bufferedPortrait)
                            }else{
                                $('#userPortrait').attr('src',"//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg")
                            }

                        </script>


                    </a>
                    <!--简易化个人信息导航-->
                    <dl class="layui-nav-child">
                        <dd><a th:href="@{/community/personal}">个人中心</a></dd>
                        <dd><a href="" class="logout">退出登录</a></dd>
                    </dl>
                </a>

            </li>

        </ul>






<!--        <form class="layui-form layui-form-pane" action="" style="width: 300px">-->
<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label" style="width: 50px;margin-left: 60px"><i class="layui-icon" style="color:gray;">&#xe615;</i></label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="title" required  lay-verify="required" placeholder="请输入要搜索的内容" autocomplete="off" class="layui-input">-->
<!--                </div>-->
<!--            </div>-->
<!--        </form>-->


<!--            &lt;!&ndash;        <div class="layui-hide-xs">&ndash;&gt;-->
<!--            &lt;!&ndash;        </div>&ndash;&gt;-->








<!--信息主体根标签-->
<div class="layui-bg-gray" style="padding: 30px;">
    <div class="layui-container layui-row">
        <div class="layui-row layui-col-space20" style="margin-right: 10%">
            <!--左1列-->
            <div class="layui-col-md3">
                <!--空间头像以及名称-->
                <div class="layui-panel" style=" width: auto;height: 300px">

                        <div class="layui-inline layui-anim layui-anim-up" style="margin-left: 26%;margin-top: 50px">
                            <!--点击按钮触发空间头像修改事件-->
<!--                            <img class="layui-circle " th:src="@{/static/img/test/IMG_1008.jpg}" alt="????" style="height: 118px;width: 118px" id="userSpacePortrait">-->
                            <img class="layui-circle " src="" alt="????" style="height: 118px;width: 118px" id="userSpacePortrait">
                            <!--头像显示-->
                            <script th:inline="javascript" th:if="${auth.isOwner(ownerId)}">
                                let bufferedSpacePortrait = [[${stp.getSessionByLoginId(ownerId).getString('userPortraitCode')}]]
                                if(bufferedSpacePortrait !== ''){
                                    $('#userSpacePortrait').attr('src',"data:image/png;base64,"+bufferedSpacePortrait)
                                }else{
                                    $('#userSpacePortrait').attr('src',"//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg")
                                }

                            </script>

                            <script th:inline="javascript" th:if="${!auth.isOwner(ownerId)}">
                                let bufferedSpacePortrait = [[${@userInfoUtil.getUserInfo(ownerId).get('userPortraitCode')}]]
                                if(bufferedSpacePortrait !== ''){
                                    $('#userSpacePortrait').attr('src',"data:image/png;base64,"+bufferedSpacePortrait)
                                }else{
                                    $('#userSpacePortrait').attr('src',"//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg")
                                }

                            </script>
                        </div>



                    <div class="layui-row" style="margin-top: 20px">

                        <div class="layui-col-md4 layui-col-md-offset4">
                            <a style="margin-left: 15%" href="" th:inline="text" th:if="${auth.isOwner(ownerId)}"> <!--点击按钮触发空间名修改事件-->
                                [[${stp.getSessionByLoginId(ownerId).getString('username')}]]

                            </a>

                            <a style="margin-left: 15%" href="" th:inline="text" th:if="${auth.isOwner(ownerId)==false}">
                                [[${@userInfoUtil.getUserInfo(ownerId).get('username')}]]
                            </a>


                            <!--这里写的是空间名称，最多五个字，实际上是动态获取的-->
                        </div>
                        <div class="layui-col-md4" style="margin-top: 20px"></div>
                    </div>

                </div>


                <!--空间签名-->
                <div class="layui-row">
                    <div class="layui-card" style=" width: auto;min-height: 140px;margin-top: 20px;">
                        <div class="layui-card-header">
                            个性签名 <!--引入模板引擎是为了区分不同用户访问时的效果-->
                            <a class="layui-icon" href="" th:if="${auth.isOwner(ownerId)}">&#xe642;</a>
                        </div>
                        <div class="layui-card-body"><!--实际是动态从后端获取的-->
                            <a th:inline="text" th:if="${auth.isOwner(ownerId)}">
                                [[${stp.getSessionByLoginId(ownerId).getString('sign')}]]
                            </a>

                            <a th:inline="text" th:if="${auth.isOwner(ownerId)==false}">
                                [[${@userInfoUtil.getUserInfo(ownerId).get('sign')}]]
                            </a>



                        </div>
                    </div>
                </div>

            </div>

            <!--左2列-->
            <div class="layui-col-md6">
                <!--媒体导航框-->
                <div class="layui-row">
                    <div class="layui-panel" style="min-height: 80px">

                        <div class="layui-row layui-col-space12">

                            <div class="layui-col-md3" >
                                <div class="layui-row" style="min-height: 40px;margin-top: 20px">
                                    <div class="layui-col-md4"  style="min-height: 10px"></div>
                                    <div class="layui-col-md4"  style="min-height: 10px; text-align: center">
                                        <a href="">
                                            留言
                                        </a>

                                    </div>
                                    <div class="layui-col-md4"  style="min-height: 10px"></div>
                                </div>

                                <div class="layui-row" style="min-height: 40px;margin-top: -10px">
                                    <div class="layui-col-md4"  style="min-height: 10px"></div>
                                    <div class="layui-col-md4"  style="min-height: 10px;text-align: center">
                                        <a href="">
                                            0
                                        </a>


                                    </div>
                                    <div class="layui-col-md4"  style="min-height: 10px"></div>
                                </div>

                            </div>

                            <div class="layui-col-md3">
                                <div class="layui-row" style="min-height: 40px;margin-top: 20px">
                                    <div class="layui-col-md4"  style="min-height: 10px"></div>
                                    <div class="layui-col-md4"  style="min-height: 10px; text-align: center">
                                        <a href="">
                                            相册
                                        </a>

                                    </div>
                                    <div class="layui-col-md4"  style="min-height: 10px"></div>
                                </div>

                                <div class="layui-row" style="min-height: 40px;margin-top: -10px">
                                    <div class="layui-col-md4"  style="min-height: 10px"></div>
                                    <div class="layui-col-md4"  style="min-height: 10px;text-align: center">
                                        <a href="">
                                            0
                                        </a>


                                    </div>
                                    <div class="layui-col-md4"  style="min-height: 10px"></div>
                                </div>
                            </div>

                            <div class="layui-col-md3">
                                <div class="layui-row" style="min-height: 40px;margin-top: 20px">
                                    <div class="layui-col-md4"  style="min-height: 10px"></div>
                                    <div class="layui-col-md4"  style="min-height: 10px; text-align: center">
                                        <a href="">
                                           关注
                                        </a>

                                    </div>
                                    <div class="layui-col-md4"  style="min-height: 10px"></div>
                                </div>

                                <div class="layui-row" style="min-height: 40px;margin-top: -10px">
                                    <div class="layui-col-md4"  style="min-height: 10px"></div>
                                    <div class="layui-col-md4"  style="min-height: 10px;text-align: center">
                                        <a href="">
                                            0
                                        </a>


                                    </div>
                                    <div class="layui-col-md4"  style="min-height: 10px"></div>
                                </div>

                            </div>


                            <div class="layui-col-md3">
                                <div class="layui-row" style="min-height: 40px;margin-top: 20px">
                                    <div class="layui-col-md4"  style="min-height: 10px"></div>
                                    <div class="layui-col-md4"  style="min-height: 10px; text-align: center">
                                        <a href="">
                                            访客
                                        </a>

                                    </div>
                                    <div class="layui-col-md4"  style="min-height: 10px"></div>
                                </div>

                                <div class="layui-row" style="min-height: 40px;margin-top: -10px">
                                    <div class="layui-col-md4"  style="min-height: 10px"></div>
                                    <div class="layui-col-md4"  style="min-height: 10px;text-align: center">
                                        <a href="">
                                            0
                                        </a>


                                    </div>
                                    <div class="layui-col-md4"  style="min-height: 10px"></div>
                                </div>

                            </div>
                        </div>


                    </div>
                </div>

                <!--留言输入框-->
                <div class="layui-row" style="margin-top: 20px">
                    <div class="layui-panel" style="min-height: 184px">

                        <div class="layui-row">
                            <form class="layui-form" action="">

                                <div class="layui-form-item layui-form-text">

                                    <div class="layui-input-block">
                                        <textarea placeholder="请输入内容" class="layui-textarea" style="margin-left: -100px;width: 470px;margin-top: 10px"></textarea>
                                    </div>
                                </div>
                            </form>

                        </div>

                        <div class="layui-row">
                            <div class="layui-btn-container">
                                <button class="layui-btn layui-btn-sm" style="margin-bottom: 10px;margin-left: 82%">我要留言</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!--留言显示框-->
                <div class="layui-row">
                    <div class="layui-panel" style=" min-height: 140px;margin-top: 20px;">
                        <!--这里是留言的样例-->
                        <div class="layui-row">
<!--                            <ul>-->
<!--                                <li>-->

<!--                                    <div class="layui-inline layui-anim layui-anim-up" style="margin-left: 20px;margin-top: 20px">-->
<!--                                        &lt;!&ndash;头像&ndash;&gt;-->
<!--                                        <img class="layui-circle" th:src="@{/static/img/test/IMG_1008.jpg}" alt="????" style="height: 50px;width: 50px">-->
<!--                                        &lt;!&ndash;昵称&ndash;&gt;-->
<!--                                        <a style=" margin-left: 5px">牛逼小王子</a>-->
<!--                                    </div>-->

<!--                                    <div style="margin-left: 75px;margin-top: 10px">-->
<!--                                        <a>111111111111111111111111111111111111111111111111111111111</a>-->
<!--                                    </div>-->
<!--                                    <div style="margin-left: 75px;margin-top: 10px">-->
<!--                                        <a style="color: gray">2020年6月17日</a>-->
<!--                                        <a class="layui-icon" style="margin-left: 10px;margin-top: 10px" href="">&#xe6c6;</a>-->
<!--                                    </div>-->


<!--                                </li>-->

<!--                            </ul>-->
                            <!--动态显示留言，采用流懒加载技术-->
                            <ul class="flow-default" id="commit_message"></ul>
                        </div>



<!--                            &lt;!&ndash;到底提示&ndash;&gt;-->
<!--                            <a style="margin-left: 200px;color: gray;margin-top: 20px" > 再无更多留言~</a>-->

                    </div>
                </div>


            </div>

            <!--左3列-->
            <div class="layui-col-md3">
                <!--左三第一张卡-->
                <div class="layui-row">
                    <div class="layui-card" style=" width: auto;min-height: 280px;min-width: 300px">
                        <div class="layui-card-header">
                            照片墙
                            <!--引入模板引擎是为了区分不同用户访问时的效果-->
                            <a class="layui-icon" href="" th:if="${auth.isOwner(ownerId)}">&#xe642;</a><!--纪念墙编辑触发按钮-->
                        </div>
                        <!--纪念墙轮播内容-->
                        <!--纪念墙只能有三张图片-->
                        <div class="layui-card-body">
                            <div class="layui-carousel" id="shows" style="height: 240px">
                                <div carousel-item>
                                    <div>条目1</div>
                                    <div>条目2</div>
                                    <div>条目3</div>
                                </div>
                        </div>
                    </div>

                    </div>
                </div>

                <!--左三第二张以后的卡(动态，显示空间所有人)-->
                <!--模板引擎的引入是为了区分不同用户访问空间时显示的效果-->
                <div class="layui-row" th:if="${auth.isOwner(ownerId)}">
                    <div class="layui-card" style=" width: auto;min-height: 140px;margin-top: 20px;min-width: 300px">
                        <div class="layui-card-header">最近访客</div>
                        <div class="layui-card-body">
                            <!--拥有人表，使用信息流加载技术-->
                            <ul class="flow-default" id="owner_list"></ul>
                            <!--以下是格式-->
<!--                            <ul>-->
<!--                                <li>-->

<!--                                    <div class="layui-inline layui-anim layui-anim-up" style="margin-left: 20px;margin-top: 20px">-->
<!--                                        &lt;!&ndash;头像&ndash;&gt;-->
<!--                                        <img class="layui-circle" th:src="@{/static/img/test/IMG_1008.jpg}" alt="????" style="height: 20px;width: 20px">-->
<!--                                        &lt;!&ndash;昵称&ndash;&gt;-->
<!--                                        <a style=" margin-left: 5px" href="">牛逼小王子</a>-->
<!--                                    </div>-->



<!--                                </li>-->

<!--                                <li>-->

<!--                                    <div class="layui-inline layui-anim layui-anim-up" style="margin-left: 20px;margin-top: 20px">-->
<!--                                        &lt;!&ndash;头像&ndash;&gt;-->
<!--                                        <img class="layui-circle" th:src="@{/static/img/test/IMG_1008.jpg}" alt="????" style="height: 20px;width: 20px">-->
<!--                                        &lt;!&ndash;昵称&ndash;&gt;-->
<!--                                        <a style=" margin-left: 5px" href="">牛逼小王子</a>-->
<!--                                    </div>-->



<!--                                </li>-->

<!--                            </ul>-->

                        </div>
                    </div>

                </div>



            </div>
        </div>
    </div>









</div>


<!--自定义脚本-->
<script th:src="@{/static/personal-space.js}" type="text/javascript"></script>
<!--负责执行退出登录的脚本-->
<form th:action="@{/logout}" class="logout-url"></form>
<form th:action="@{/login}" class="login-page"></form>
<script th:src="@{/static/logout.js}"></script>


<!--信息获取接口-->
<!--信息获取API为前缀+id号-->

<!--后端服务器用户头像获取接口前缀-->
<form th:action="@{/download/image/message/}" id="message_owner_image_download"></form>

<!--后端服务器空间头像获取接口前缀-->
<form th:action="@{/download/space/image/}" id="space_owner_image_download"></form>

<!--后端服务器留言获取接口前缀-->
<form th:action="@{/download/space/commit/}" id="space_commit_download"></form>

<!--后端服务器空间签名获取接口前缀-->
<form th:action="@{/download/space/signature/}" id="space_signature_download"></form>

<!--后端服务器空间拥有人签名获取接口前缀-->
<form th:action="@{/download/space/owners/}" id="space_owners_download"></form>

<!--后端服务器空间纪念墙信息获取接口前缀-->
<form th:action="@{/download/space/anniversary/}" id="space_anniversary_download"></form>

<!--后端服务器空间媒体信息获取接口前缀-->
<form th:action="@{/download/space/media/}" id="space_media_download"></form>
</body>
</html>